<template>
  <div id="app">
    <!-- 用户状态栏 -->
    <div class="user-bar">
      <UserStatus />
    </div>

    <!-- 主游戏区域 -->
    <div class="game-container">
      <GameBoard />
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { useConfigStore } from '@/stores/config';
import { useCloudScoresStore } from '@/stores/cloud-scores';
import GameBoard from './components/GameBoard.vue';
import UserStatus from './components/UserStatus.vue';

const authStore = useAuthStore();
const configStore = useConfigStore();
const cloudScoresStore = useCloudScoresStore();

onMounted(async () => {
  // 初始化认证状态
  await authStore.initAuth();
  
  // 初始化配置
  await configStore.init();
  
  // 如果已认证，初始化云端数据
  if (authStore.isAuthenticated) {
    await cloudScoresStore.init();
  }
});
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

#app {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.user-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.game-container {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.btn {
  padding: 12px 30px;
  border: none;
  border-radius: 25px;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;

  &.btn-primary {
    background: #4A90E2;
    color: white;

    &:hover {
      background: #357ABD;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(74, 144, 226, 0.4);
    }
  }

  &.btn-secondary {
    background: #7ED321;
    color: white;

    &:hover {
      background: #6BB91C;
      transform: translateY(-2px);
      box-shadow: 0 5px 15px rgba(126, 211, 33, 0.4);
    }
  }
}
</style>
